<route>
    {
        meta: {
            layout: 'index',
            title:'井信息管理'
        }
    }  
</route>
<template>
    <a-row>
        <a-col :span="6">
            <a-button type="primary" style="margin-bottom: 10px; width: 90px;" @click="openAdd">
                <template #icon><plus-outlined /></template>新增
            </a-button>
            <WellTree @search="handleSearch" @confirm="openDash"></WellTree>
        </a-col>
        <a-col :span="18">
            <view v-if="selectedWell">
                <Dash v-model:value="selectedWell"></Dash>
            </view>
            <view v-else>
                <a-table :dataSource="tableData" :columns="columns" :pagination="false">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'name'">
                            <a>
                                {{ record.name }}
                            </a>
                        </template>
                        <template v-else-if="column.key === 'action'">
                            <span>
                                <a-button type="primary" shape="round" :size="size" @click="openDash(record.id)">
                                    <template #icon>
                                        <line-chart-outlined />
                                    </template>
                                    控制台
                                </a-button>
                            </span>
                        </template>
                    </template>
                </a-table>
            </view>
        </a-col>
    </a-row>

    <AntdConfirmModal title="新建井" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
        <GdMap :longitude="form.longitude" :latitude="form.latitude" @setAddress="setAddress" @setLnglat="setLnglat">
        </GdMap>
        <a-form :model="form">
            <a-row style="margin-top:15px">
                <a-col :span="24">
                    <a-form-item label="纬度">
                        <a-input-number v-model:value="form.latitude" controls-position="right" :step="0.0001"
                            style="width:100%" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-item label="经度">
                        <a-input-number v-model:value="form.longitude" controls-position="right" :step="0.0001"
                            style="width:100%" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row gutter="15">
                <a-col :span="12">
                    <a-form-item label="井ID" name="wellId" :rules="[{ required: true, message: '请输入井ID' }]">
                        <a-input v-model:value="form.wellId" style="width:100%" placeholder="请输入井号" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="井名称" name="wellName" :rules="[{ required: true, message: '请输入井名称' }]">
                        <a-input v-model:value="form.wellName" style="width:100%" placeholder="请输入井名" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row gutter="15">
                <a-col :span="8">
                    <a-form-item label-width="10px">
                        <a-input v-model:value="form.province" placeholder="省" style="width:100%" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label-width="10px">
                        <a-input v-model:value="form.city" placeholder="市" style="width:100%" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label-width="10px">
                        <a-input v-model:value="form.county" placeholder="区" style="width:100%" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </AntdConfirmModal>
</template>
<script setup>
import { PlusOutlined, LineChartOutlined } from '@ant-design/icons-vue'
import { columns, queryForm } from './index'
import { createOne, queryList } from '@/custom/well/api/well'
import WellTree from './components/WellTree'
import Dash from './components/Dash'
import GdMap from '../structure/components/map.vue'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const tableData = ref([])
const selectedWell = ref(false)
const queryParams = ref(queryForm)
const form = ref({
    operator: '',
    field: '',
    location: '',
    province: '',
    city: '',
    state: '',
    country: '',
    county: '',
    latitude: 44,
    longitude: 124,
    wellId: '',
    wellName: '',
    h2s: false,
    co2: false
})
function setAddress(e) {
    form.value.country = e.country
    form.value.province = e.province
    form.value.city = e.city
    form.value.county = e.district
}
function setLnglat(e) {
    console.log(e)
    form.value.latitude = e.lat
    form.value.longitude = e.lng
}

function handleSearch(key) {
    selectedWell.value = undefined
    queryParams.value.searchKey = key;
    queryList(queryParams.value).then(res => {
        console.log(res)
        tableData.value = res.content;
    })
}
// 打开控制面板
function openDash(e) {
    selectedWell.value = e;
}
function openAdd() {
    modalRef.value.openModal()
}
function submitForm() {
    createOne(form.value).then((response) => {
        $.$modal.msgSuccess("新增成功");
        modalRef.value.closeModal()
    });
}
</script>
  